<!-- 
  @description: 分类标签（用于新增待办时指定分类）
-->
<template>
  <div class="category-dv">
    <L-Tag
      v-for="item of categoryList"
      :key="item.id"
      :tagItem="item"
      class="l-tag"
      @tagClick="tagClick"
    ></L-Tag>
  </div>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance, onMounted } from 'vue'
import LTag from '../Common/Tag.vue'
import { TodoTag } from '../../types/TodoType'

const { proxy }: any = getCurrentInstance()

let categoryList: TodoTag[] = reactive([
  // {
  //   id: 1,
  //   content: 'Work',
  //   isActive: true
  // },
  // {
  //   id: 2,
  //   content: 'Study',
  //   isActive: false
  // }
])

onMounted(() => {
  getList()
})

const emit = defineEmits(['categoryClick'])
function tagClick(content: string) {
  categoryList.forEach((v) => {
    if (v.content === content) {
      // 必须选其中一项，不能取消选择
      v.isActive = true
      emit('categoryClick', content)
    } else {
      v.isActive = false
    }
  })
}

async function getList() {
  const { data: res } = await proxy.$http.get('/category/list')
  if (res.isSuccess) {
    categoryList.length = 0
    res.data.forEach((item: any, index: number) => {
      categoryList.push({
        id: item.id,
        content: item.title,
        // 第一项分类默认选中
        isActive: index === 0
      })
    })
  }
}
</script>

<style lang="less" scoped>
.category-dv {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  .fl();

  .l-tag {
    margin: 0 10px;
  }
}
</style>

